<template>
  <div>
    <NavBar :title="title" />
    <div class="detail-containenr">
      <!-- 轮播 -->
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="banner in pics" :key="banner.id">
          <img :src="banner.pic" alt="" />
        </van-swipe-item>
      </van-swipe>
      <!-- /轮播 -->
      <div class="item-info">
        <h5 class="name">
          {{ basicInfo.name }}
        </h5>
      </div>
      <div class="item-content" v-html="content"></div>
    </div>
    <van-action-bar>
      <van-action-bar-icon icon="cart-o" @click="router.push('/cart')" text="购物车" />
      <van-action-bar-icon icon="wap-home-o" @click="router.push('/home')" text="主页" />
      <van-action-bar-button type="warning" @click="showSkuDialog(0)" text="加入购物车" />
      <van-action-bar-button type="danger" @click="showSkuDialog(1)" text="立即购买" />
    </van-action-bar>
    <!-- 商品规格弹窗 -->
    <van-popup
      closeable
      round
      position="bottom"
      v-model:show="skuShow"
      :style="{ padding: '64px' }"
    >
      <van-card
        :num="sku.number"
        :price="sku.minPrice"
        :title="sku.name"
        :thumb="sku.pic"
      >
        <template #footer>
          <van-stepper :min="1" v-model="sku.number" />
          <van-button @click="confirmAction" size="large" round type="danger"
            >确定</van-button
          >
        </template>
      </van-card>
    </van-popup>
    <!-- /商品规格弹窗 -->
  </div>
</template>

<script setup lang="ts" name="ItemDetail">
import { ref, onMounted, reactive } from "vue";
import { useRoute, useRouter } from "vue-router";
import NavBar from "@/components/NavBar.vue";
import { fetchItemDetail } from "@a/index";
const route = useRoute();
const router = useRouter();
const title = ref("详情页");
const basicInfo = ref<{
  id: number;
  name: string;
  minPrice: number;
}>({
  id: -1,
  name: "",
  minPrice: 0,
});
const content = ref("");
const pics = ref<{ id: number; pic: string }[]>([]);
// 商品规格
const sku = ref({});
const getItems = () => {
  fetchItemDetail(route.query.id).then((res) => {
    if (res.data.code === 0) {
      basicInfo.value = res.data.data.basicInfo;
      content.value = res.data.data.content.replace(
        /<img/gi,
        '<img style="display:block;width:100%"'
      );
      pics.value = res.data.data.pics;
      title.value = res.data.data.basicInfo.name;
      sku.value = {
        ...res.data.data.basicInfo,
        number: 1,
      };
    }
  });
};
onMounted(() => {
  getItems();
});

// 控制商品规格弹窗
const skuShow = ref(false);
const showSkuDialog = (actionType: number) => {
  skuShow.value = true;
  clickAction = actionType;
};
let clickAction = 0; // 0 点击购物车 1 点击立即购买
// 点击商品规格中的确定按钮
const confirmAction = () => {
  if (clickAction === 1) {
    alert("点了立即购买");
  } else {
    alert("点了加入购物车");
  }
  skuShow.value = false;
};
</script>

<style scoped lang="scss">
.detail-containenr {
  padding-bottom: 50px;
}
.my-swipe {
  width: 10rem;
  height: 5rem;
  img {
    width: 10rem;
    height: 5rem;
  }
}
.item-info {
  .name {
    font-size: 16px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
// .item-content {
//   :deep img {
//     display: block;
//     width: 100%;
//   }
// }
:deep .van-popup {
  padding: 20px !important;
  .van-card {
    background-color: #fff;
  }
}
</style>
